<template>
  <div
    class="folder"
    @dblclick="isEdit = true"
    @keypress="onKyePress"
  >
    <div
      v-if="!isEdit"
      class="name"
    >
      {{ name }}
    </div>
    <input
      v-else
      ref="inputRef"
      v-model="localName"
      type="text"
    >
  </div>
</template>

<script setup lang="ts">
import { emitter } from '@/composable'
import { useFolderStore } from '@/store/folders'
import { onClickOutside } from '@vueuse/core'
import { computed, nextTick, onUnmounted, ref, watch } from 'vue'

interface Props {
  id: string
  name: string
}

const props = defineProps<Props>()
const folderStore = useFolderStore()

const backupName = ref(props.name)
const isEdit = ref(false)

const inputRef = ref<HTMLInputElement>()

const localName = computed({
  get: () => props.name,
  set: v => folderStore.patchFoldersById(props.id, { name: v })
})

onClickOutside(inputRef, async () => {
  isEdit.value = false
  if (!props.name) {
    await folderStore.patchFoldersById(props.id, { name: backupName.value })
  }
  backupName.value = props.name
})

const onKyePress = (e: KeyboardEvent) => {
  if (e.code === 'Enter') isEdit.value = false
}

watch(isEdit, () => {
  nextTick(() => inputRef.value?.select())
})

const onRename = (id: string) => {
  if (id === props.id) isEdit.value = true
}

emitter.on('folder:rename', onRename)

onUnmounted(() => {
  emitter.off('folder:rename', onRename)
})
</script>

<style lang="scss" scoped>
.folder {
  width: 100%;
  input {
    border: 0;
    background: #fff;
    outline: var(--color-primary) solid 1px;
    width: 95%;
    padding: 0;
    margin: 0;
  }
}
.name {
  user-select: none;
}
</style>
